'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
} from 'react-native';

import Util from '../../../../core/utils/util';
import {Loading, EasyLoading} from 'react-native-easy-loading';
import DatePicker from 'react-native-datepicker'
import CameraButton from '../../../../core/component/comp.button-camera';
import Color from '../../../../core/constant/color';
import Http from '../../../../core/utils/http';
import {StackNavigator, TabNavigator, withNavigation} from 'react-navigation';
import IconButton from "../../../../core/component/comp.icon-button";

class FabuScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "发布红包约会",
        headerTintColor: "white",
        headerStyle: {
            backgroundColor: '#D54336',
            elevation: null
        },
    });

    // 构造
    constructor(props) {
        super(props);
        this.state = {
            totalMoney: '',  //总金额
            meetingType: '', //约会类型
            meetingPlace: '',//约会地点
            canPublish: false,//是否可以发布
        }
    }

    componentDidMount() {

    }

    genMoneyInputUI() {
        const {totalMoney} = this.state
        return (
            <View>
                <View style={styles.moneyInputPanel}>
                    <Text style={styles.title}>总金额</Text>
                    <TextInput placeholder="2000~30000" style={styles.moneyInputText} value={totalMoney} onChangeText={(text) => this.setState({totalMoney:text})} />
                    <Text style={styles.lastTitle}>币</Text>
                </View>
                <Text style={styles.tipBox}>约会红包最少2000心愿币（1元=10币）</Text>
            </View>
        );
    }

    onPressMeetingType=()=>{
        Util.showToast("选择约会类型")
    }

    genMeetingTypeUI() {
        const {meetingType} = this.state
        return (
            <TouchableOpacity onPress={this.onPressMeetingType}>
                <View style={styles.meetingTypeInputPanel}>
                    <Text style={styles.title}>约会类型</Text>
                    <TextInput placeholder="请选择您的约会内容" style={styles.meetingTypeInputText} value={meetingType} onChangeText={(text) => this.setState({meetingType:text})} />
                    <Text style={styles.lastTitle}>选择</Text>
                </View>
            </TouchableOpacity>
        );
    }

    genMeetingPlaceUI() {
        const {meetingPlace} = this.state
        return (
            <View style={styles.placeInputPanel}>
                <Text style={styles.title}>约会地点</Text>
                <TextInput placeholder="请选择约会地点" style={styles.placeInputText} value={meetingPlace} onChangeText={(text) => this.setState({meetingPlace:text})} />
                <Text style={styles.lastTitle}></Text>
            </View>
        );
    }

    getCanPublish(){
        const {totalMoney,meetingPlace,meetingType} = this.state
        if(totalMoney!='' && meetingType!='' && meetingPlace!=''){
            return true
        }else{
            return false
        }
    }

    getFormatMoney(){
        const {totalMoney} = this.state
        let realMoney = parseFloat(totalMoney)
        console.log(realMoney)
        if(isNaN(realMoney)){
            realMoney = 0;
        }
        return Util.formatNumber(realMoney/10,'0,0.00');

    }

    genRealMoneyUI(){
        return (
            <View style={styles.realMoneyPanel}>
                <Text style={styles.realMoneyType}>¥</Text>
                <Text style={styles.realMoneyNumber}>{this.getFormatMoney()}</Text>
            </View>
        );
    }

    onPressPublish(canPublish){
        if(!canPublish){
            Util.showToast('填写完整才能发布哦~')
        }else{
            Util.showToast('正在发布哦~')
        }
    }

    genSubmitButtonUI() {
        const canPublish = this.getCanPublish()
        let btnPublishStyle = null
        if(canPublish){
            btnPublishStyle = styles.btnPublishActive
        }

        return (
            <IconButton style={[styles.btnPublish,btnPublishStyle]} textStyle={styles.btnPublishText} title="发布" onPress={this.onPressPublish.bind(this,canPublish)}/>
        );
    }

    render() {
        return (
            <ScrollView style={styles.body}>
                {this.genMoneyInputUI()}
                {this.genMeetingTypeUI()}
                {this.genMeetingPlaceUI()}
                {this.genRealMoneyUI()}
                {this.genSubmitButtonUI()}
            </ScrollView>
        )
    }

}


const styles = StyleSheet.create({
    body: {
        backgroundColor: '#F9F4F1',
        flex: 1,
        padding: 8,
    },
    tipBox: {
        fontSize: 12,
        color: '#D7D7D6',
    },
    //约会金额
    moneyInputPanel: {
        height: 50,
        borderRadius: 5,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 8,
        paddingRight: 8,
        marginTop: 16,
        marginBottom: 8,
    },
    title: {
        fontSize: 16,
        width:70,
    },
    moneyInputText: {
        height: 40,
        flex: 1,
        marginLeft: 8,
        marginRight: 8,
    },
    lastTitle: {
        fontSize: 16,
    },
    //约会类型
    meetingTypeInputPanel: {
        height: 50,
        borderRadius: 5,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 8,
        paddingRight: 8,
        marginTop: 16,
    },
    meetingTypeInputText: {
        height: 40,
        flex: 1,
        marginLeft: 8,
        marginRight: 8,
    },
    //约会地点
    placeInputPanel: {
        height: 50,
        borderRadius: 5,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 8,
        paddingRight: 8,
        marginTop: 16,
    },
    placeInputText: {
        height: 40,
        flex: 1,
        marginLeft: 8,
        marginRight: 8,
    },
    btnPublish:{
        height:40,
        backgroundColor:'#E9C1B6',
    },
    btnPublishActive:{
        backgroundColor:'#EA5F39',
    },
    btnPublishText:{
        fontSize:16,
    },
    realMoneyPanel:{
        alignItems:'flex-start',
        justifyContent:'center',
        flexDirection:'row',
        margin:16,
    },
    realMoneyType:{
        fontSize:20,
        marginTop:5,
        marginRight:2,
    },
    realMoneyNumber:{
        fontSize:40,
    },
});

export default FabuScene;